<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="container">
        <div class="logo">
          <router-link to="/">E-Shop</router-link>
        </div>
        <div class="nav-links">
          <router-link to="/products" class="nav-link">商品列表</router-link>
          <router-link to="/cart" class="nav-link" v-if="authStore.isAuthenticated">
            购物车 <el-badge :value="cartCount" class="item" />
          </router-link>
          <router-link to="/profile" class="nav-link" v-if="authStore.isAuthenticated">个人中心</router-link>
          <router-link to="/login" class="nav-link" v-else-if="!authStore.isAuthenticated">登录</router-link>
          <router-link to="/register" class="nav-link" v-else>注册</router-link>
        </div>
      </div>
    </nav>

    <!-- 轮播图 -->
    <div class="carousel-container">
      <el-carousel height="400px">
        <el-carousel-item>
          <img src="https://picsum.photos/id/26/1200/400" alt="促销活动" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://picsum.photos/id/96/1200/400" alt="新品上市" class="carousel-img" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="https://picsum.photos/id/65/1200/400" alt="限时折扣" class="carousel-img" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 分类导航 -->
      <section class="categories-section">
        <h2>商品分类</h2>
        <div class="categories-grid">
          <el-card v-for="category in categories" :key="category.id" class="category-card">
            <router-link :to="{ path: '/products', query: { category: category.id } }">
              <img :src="`https://picsum.photos/id/${category.id + 30}/200/150`" alt="category.name" class="category-image" />
              <h3>{{ category.name }}</h3>
            </router-link>
          </el-card>
        </div>
      </section>

      <!-- 精选商品 -->
      <section class="featured-products">
        <h2>精选商品</h2>
        <div class="products-grid">
          <el-card v-for="product in featuredProducts" :key="product.id" class="product-card">
            <router-link :to="`/product/${product.id}`" class="product-link">
              <img :src="product.images?.[0] || `https://picsum.photos/id/${product.id}/300/300`" alt="product.name" class="product-image" />
              <div class="product-info">
                <h3 class="product-name">{{ product.name }}</h3>
                <p class="product-price">¥{{ product.price }}</p>
                <p class="product-category">{{ product.category?.name }}</p>
              </div>
            </router-link>
            <div class="product-actions">
              <el-button type="primary" size="small" @click="addToCart(product.id)">加入购物车</el-button>
            </div>
          </el-card>
        </div>
        <div class="view-all">
          <router-link to="/products">查看全部商品 <el-icon><ArrowRight /></el-icon></router-link>
        </div>
      </section>

      <!-- 优惠活动 -->
      <section class="promotions-section">
        <div class="promotion-card">
          <div class="promotion-content">
            <h2>新用户专享</h2>
            <p>注册即送100元优惠券</p>
            <router-link to="/register" class="promotion-btn">立即注册</router-link>
          </div>
          <img src="https://picsum.photos/id/175/600/300" alt="新用户专享" class="promotion-image" />
        </div>
      </section>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-column">
            <h3>关于我们</h3>
            <p>我们是一家专注于提供优质商品的电商平台</p>
          </div>
          <div class="footer-column">
            <h3>客户服务</h3>
            <router-link to="#">帮助中心</router-link>
            <router-link to="#">联系我们</router-link>
          </div>
          <div class="footer-column">
            <h3>关注我们</h3>
            <div class="social-links">
              <el-icon><ChatLineRound  /></el-icon>
              <el-icon><Link /></el-icon>
              <el-icon><Message /></el-icon>
            </div>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; 2023 E-Shop. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '../stores/auth';
import { productService } from '../api/productService';
import { cartService } from '../api/cartService';
import { ArrowRight, ChatLineRound , Link, Message } from '@element-plus/icons-vue';

const router = useRouter();
const authStore = useAuthStore();
const featuredProducts = ref<any[]>([]);
const categories = ref<any[]>([]);
const cartCount = ref(0);

// 模拟分类数据
const mockCategories = [
  { id: 1, name: '电子产品' },
  { id: 2, name: '家居用品' },
  { id: 3, name: '服装配饰' },
  { id: 4, name: '食品饮料' },
  { id: 5, name: '美妆护肤' },
  { id: 6, name: '运动户外' }
];

// 模拟精选商品数据
const mockFeaturedProducts = [
  { id: 1, name: '智能手机', price: 3999, category: { name: '电子产品' } },
  { id: 2, name: '时尚连衣裙', price: 599, category: { name: '服装配饰' } },
  { id: 3, name: '智能手表', price: 1299, category: { name: '电子产品' } },
  { id: 4, name: '家居香薰', price: 299, category: { name: '家居用品' } },
  { id: 5, name: '运动鞋', price: 899, category: { name: '运动户外' } },
  { id: 6, name: '护肤套装', price: 799, category: { name: '美妆护肤' } }
];

const fetchData = async () => {
  try {
    // 尝试从API获取数据，如果失败则使用模拟数据
    const productsResponse = await productService.getProducts({ limit: 6 });
    // 修改这一行，正确访问Axios响应中的数据
    featuredProducts.value = productsResponse.data.products.length > 0 
      ? productsResponse.data.products 
      : mockFeaturedProducts;

    const categoriesResponse = await productService.getCategories();
    // 修改这一行，正确访问Axios响应中的数据
    categories.value = categoriesResponse.data.length > 0 
      ? categoriesResponse.data 
      : mockCategories;

    // 获取购物车数量
    if (authStore.isAuthenticated) {
      const cartResponse = await cartService.getCart();
      // 修改这一行，正确访问Axios响应中的数据
      cartCount.value = cartResponse.data.summary.totalItems;
    }
  } catch (error) {
    // 如果API调用失败，使用模拟数据
    console.error('获取数据失败，使用模拟数据:', error);
    featuredProducts.value = mockFeaturedProducts;
    categories.value = mockCategories;
  }
};

const addToCart = async (productId: number) => {
  if (!authStore.isAuthenticated) {
    ElMessage.warning('请先登录');
    router.push('/login');
    return;
  }

  try {
    await cartService.addToCart({ productId, quantity: 1 });
    cartCount.value++;
    ElMessage.success('已加入购物车');
  } catch (error) {
    ElMessage.error('添加到购物车失败');
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-link {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-link:hover {
  background-color: #f5f5f5;
  color: #409eff;
}

.carousel-container {
  max-width: 1200px;
  margin: 20px auto;
  width: 100%;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.categories-section, .featured-products, .promotions-section {
  margin-bottom: 60px;
}

.categories-section h2, .featured-products h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #333;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.category-card {
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.category-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-link {
  text-decoration: none;
  color: #333;
}

.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.product-info {
  padding: 16px;
}

.product-name {
  font-size: 18px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  font-size: 20px;
  color: #f56c6c;
  margin-bottom: 4px;
}

.product-category {
  color: #909399;
  font-size: 14px;
}

.product-actions {
  padding: 0 16px 16px;
  margin-top: auto;
}

.view-all {
  text-align: center;
  margin-top: 20px;
}

.view-all a {
  color: #409eff;
  text-decoration: none;
}

.promotion-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.promotion-content h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.promotion-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.promotion-btn {
  background-color: white;
  color: #667eea;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
}

.promotion-btn:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
}

.promotion-image {
  width: 300px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 40px 0;
}

.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-column h3 {
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-column p {
  line-height: 1.6;
  color: #ccc;
}

.footer-column a {
  color: #ccc;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.footer-column a:hover {
  color: #409eff;
}

.social-links {
  display: flex;
  gap: 15px;
  font-size: 24px;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444;
  color: #ccc;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
    padding: 0 20px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .promotion-card {
    flex-direction: column;
    text-align: center;
  }
  
  .promotion-image {
    margin-top: 20px;
    width: 100%;
  }
  
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links {
    gap: 10px;
  }
  
  .nav-link {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .carousel-container {
    height: 200px;
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .category-card {
    padding: 10px;
  }
  
  .category-image {
    height: 100px;
  }
  
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .product-card {
    padding: 10px;
  }
  
  .product-image {
    height: 150px;
  }
  
  .promotion-section {
    padding: 30px 0;
  }
  
  .promotion-card {
    padding: 20px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .navbar .container {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  
  .logo a {
    font-size: 20px;
  }
  
  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .carousel-container {
    height: 150px;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .product-card {
    margin-bottom: 10px;
  }
  
  .promotion-card {
    padding: 15px;
  }
  
  .promotion-content h2 {
    font-size: 20px;
  }
  
  .promotion-content p {
    font-size: 14px;
  }
}
</style>